<template>
  <div class="mymap-container">
    <el-button text @click="dialogVisible = true"> click to open the Dialog </el-button>
    <el-dialog
      v-model="dialogVisible"
      center
      :title="title"
      width="20%"
      :before-close="handleClose"
    >
      <span>
        <div class="box">
          <span class="left">道路名称：</span> <span class="right">双岭高架路</span>
        </div>
        <div class="box">
          <span class="left">规划道路等级：</span> <span class="right">支路</span>
        </div>
        <div class="box">
          <span class="left">规划道路红线：</span> <span class="right">6</span>
        </div>
        <div class="box">
          <span class="left">现状道路宽度：</span> <span class="right">6</span>
        </div>
        <div class="box"> <span class="left">机动车道数：</span> <span class="right">2</span> </div>
        <div class="box">
          <span class="left">建设完成情况：</span> <span class="right">已建设</span>
        </div>
        <div class="box">
          <span class="left">道路长度：</span> <span class="right">758.82</span>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { defineComponent, ref } from 'vue';
  export default defineComponent({
    setup() {
      const title = ref('道路基础信息');
      const dialogVisible = ref(false);
      return { title, dialogVisible };
    },
  });
</script>
<style lang="less" scoped>
  :deep .el-dialog__title {
    color: #fff !important;
  }
  :deep .el-dialog {
    background-image: linear-gradient(rgb(10, 132, 229), rgb(2, 27, 47)) !important;
    // background-color: #0e96f5 !important;

    :deep.el-dialog__headerbtn {
      i {
        color: #fff !important;
      }
    }
  }
  .box {
    margin-left: 20%;
    .left {
      float: left;
      width: 112px;
      height: 16px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 300;
      color: #ffffff;
      opacity: 0.6;
    }
    .right {
      width: 80px;
      height: 16px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
  }
</style>
